<template>
  <div>
    <div class="query-header">
      <a-row>
        <a-form layout="inline">
          <a-col :span="24">
            <a-form-item label="查詢日期">
              <a-range-picker  :default-value="[queryParam.dateStrStart, queryParam.dateStrEnd]" :format="dateFormat" @change="onDateChange" />
            </a-form-item>
            <a-form-item label="">
                <a-radio-group  v-model="queryParam.receiveDateType" button-style="solid">
                  <a-radio-button value="1">
                    實收日期
                  </a-radio-button>
                  <a-radio-button value="2">
                    應收日期
                  </a-radio-button>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="交易方式">
              <a-select style="width: 150px" v-model="queryParam.transaction" placeholder="请选择交易方式" >
                <a-select-option value="0">全部交易</a-select-option>
                <a-select-option v-for="(item,index) in collectionTypeData" :key="index" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="审核标志">
                  <a-select style="width: 150px" v-model="queryParam.auditFlag" placeholder="请选择审核标志"  >
                    <a-select-option  :value="2">全部審核</a-select-option>
                    <a-select-option  :value="0">未審核</a-select-option>
                    <a-select-option  :value="1">已審核</a-select-option>
                  </a-select>
            </a-form-item>
            <a-form-item label="房產">
                  <a-select style="width: 200px"  v-model="queryParam.stateId" @change="handleStateChange" placeholder="请选择房產">
                    <a-select-option value="0" :key="'info1-'+0" >全部房產</a-select-option>
                    <a-select-option v-for="(item,index) in stateData" :key="'info1-'+index"  :value="item.id">{{ item.name }}</a-select-option>
                  </a-select>
            </a-form-item>
            <a-form-item label="房閒">
                  <a-select style="width: 200px" v-model="queryParam.roomId" @change="handleRoomChange" placeholder="请选择房閒">
                    <a-select-option value="0" :key="'info2-'+0" >全部房閒</a-select-option>
                    <a-select-option v-for="(item,index) in roomData" :key="'info2-'+index"  :value="item.id">{{ item.code }}</a-select-option>
                  </a-select>
            </a-form-item>
            <a-button type="primary" @click="query()">查询</a-button></a-col>
          </a-col>
        </a-form>
      </a-row>
      <a-divider />
      <!-- <a-row>
        <a-col :span="8"></a-col>
        <a-col :span="8"><a-button type="primary" @click="query()">查询</a-button></a-col>
        <a-col :span="8"></a-col>
      </a-row> -->
    </div>
    <div class="systic">
       <a-row>
        <a-col :span="12">
           <a-button type="dashed">
            收入合計：<span class="systic-red">{{ cwTjHz.sr }}</span>
          </a-button><a-divider type="vertical" />
          <a-button type="dashed">
            支出合計：<span class="systic-green">{{ cwTjHz.zc }}</span>
          </a-button><a-divider type="vertical" />
          <a-button type="dashed">
            結餘：<span class="systic-blue">{{ cwTjHz.jy }}</span>
          </a-button>
        </a-col>
        <a-col :span="12">
          <!-- <a-button type="dashed" class="systic-bt">導出</a-button> -->
        </a-col>
      </a-row>
    </div>
    <div class="tb-content">
       <div id="v-container">
          <v-chart
              :forceFit="true"
              :height="500"
              :data="data"
              :padding="padding"
          >
              <v-tooltip
                  crosshairs="y"
                  :follow="false"
                  :htmlContent="htmlContent"
              ></v-tooltip>
              <v-axis></v-axis>
              <v-legend :useHtml="true" :itemTpl="itemTplLegend" :position ="position"></v-legend>
              <v-line
                  position="date*value"
                  color="type"
              ></v-line>
          </v-chart>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  import * as $ from 'jquery'
  import { busMeansOfTransactionList } from '@/api/modular/main/busmeansoftransaction/busMeansOfTransactionManage'
  import { getAllStateList, getStateRoomListByStateId } from '@/api/modular/main/busrealestate/busRealEstateManage'
  import { cwTj, cwTjHz } from '@/api/modular/main/billotherrevenues/billOtherRevenuesManage'
  if (!$('#tooltip-custom-style').length) {
      $('head').append(`
        <style id="tooltip-custom-style">
        .custom-tooltip{width: 100%!important; height: 10%!important; position: absolute; top:0px; left:0px}
        .custom-tooltip-item{width: 150px; height: 50px; position: relative; float: left; margin-left: 20px; border-left-style: solid; border-left-width: 5px}
        .custom-tooltip-item:first-child{margin-left:0}
        .custom-tooltip-item-name{width:80%; height: 20px; position: absolute; top:0px; left:10px; color: rgba(0,0,0,0.45); font-size: 14px}
        .custom-tooltip-item-value{width:80%; height: 30px; position: absolute; bottom:0px; left:10px; color: #262626; font-size: 22px; /*font-weight: bold*/}
        </style>
      `)
  }
  export default {
    components: {
    },
    mounted() {
      this.getTjsData()
    },
    data () {
      return {
        dateFormat: 'YYYY-MM-DD',
        queryParam: {
          dateStrStart: moment().startOf('month').format('YYYY-MM-DD'),
          dateStrEnd: moment().endOf('month').format('YYYY-MM-DD'),
          receiveDateType: '1',
          transaction: '0',
          auditFlag: 2,
          stateId: '0',
          roomId: '0'
        },
        collectionTypeData: [],
        stateData: [],
        roomData: [],
        cwTjHz: {},
        position: 'top-center',
        data: [],
        padding: [100, 20, 80, 50],
        htmlContent: function htmlContent(title, items) {
                var alias = {
                    zc: '支出',
                    sr: '收入',
                    jy: '結餘'
                }
                var html = '<div class="custom-tooltip">'
                for (var i = 0; i < items.length; i++) {
                    var item = items[i]
                    var color = item.color
                    var name = alias[item.name]
                    var value = item.value
                    var domHead = '<div class="custom-tooltip-item" style="border-left-color:' + color + '">'
                    var domName = '<div class="custom-tooltip-item-name">' + name + '</div>'
                    var domValue = '<div class="custom-tooltip-item-value">' + value + '</div>'
                    var domTail = '</div>'
                    html += domHead + domName + domValue + domTail
                }
                return html + '</div>'
        },
        itemTplLegend: function itemTpl(value, color, checked, index) {
            var showTest = ''
            if (value === 'sr') {
            showTest = '收入'
            } else if (value === 'zc') {
            showTest = '支出'
            } else if (value === 'jy') {
            showTest = '結餘'
            }
            checked = checked ? 'checked' : 'unChecked'
            return '<tr class="g2-legend-list-item item-' + index + ' ' + checked + '" data-value="' + value + '" data-color=' + color + ' >' + '<td style="width:120px;"><i class="g2-legend-marker" style="width:10px;height:10px;display:inline-block;margin-right:10px;background-color:' + color + ';"></i>' + '<span class="g2-legend-text" style="color: #666">' + showTest + '</span></td></tr>'
        }
      }
    },
    created () {
      this.initData()
      this.getAllcwTjHz()
    },
    methods: {
      moment,
      onDateChange(date, dateString) {
        const s1 = dateString[0]
        const s2 = dateString[1]
        this.queryParam.dateStrStart = s1
        this.queryParam.dateStrEnd = s2
      },
      initData() {
        busMeansOfTransactionList().then((res) => {
          if (res.code === 200) {
            this.collectionTypeData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        this.getAllStateList()
      },
      getAllcwTjHz() {
        cwTjHz(this.queryParam).then((res) => {
          if (res.code === 200) {
            this.cwTjHz = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      getAllStateList() {
        getAllStateList().then((res) => {
          if (res.code === 200) {
            this.stateData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      handleStateChange(value) {
        if (value !== '0') {
          this.getAllStateRoomList(value)
        }
        this.queryParam.roomId = '0'
      },
      getAllStateRoomList(id) {
        getStateRoomListByStateId(id).then((res) => {
          if (res.code === 200) {
            this.roomData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      handleRoomChange(value) {
         this.queryParam.roomId = value
      },
      getTjsData () {
        cwTj(this.queryParam).then((res) => {
          if (res.code === 200) {
            this.data = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      query() {
        this.getAllcwTjHz()
        this.getTjsData()
      }
    }
  }
</script>
<style lang="less" scoped>
.query-header{
  padding: 0px 10px;
}
.systic{
  margin-top: 6px;
  border: 1px solid #ccc;
  padding: 10px;
}
.systic-red{
  color: red;
  font-size: 16px;
}
.systic-green{
  color: green;
  font-size: 16px;
}
.systic-blue{
  color: blue;
  font-size: 16px;
}
.systic-bt{
  float: right;
  margin-right: 16px;
}
.tb-content{
  margin-top: 16px;
}
</style>
